<!--{template common/header}-->
<div class="nav">
	<div class="nav_left"><a href="home.php?mod=spacecp&ac=profile&op=base"><i class="fa fa-angle-left fa-15x"></i></a></div>
	<div class="nav_center">
		<a href="forum.php?mod=forumdisplay&fid=$_G['fid']">{lang memcp_avatar}</a>
	</div>
</div>

	<div class="s-hide-5"></div>
    <div id="defaultavatar" style="display:none;"><!--{avatar($space[uid],big)}--></div>
<div class="lazy_tip" id="lazy_tip"><span>1%</span><br>	&#36733;&#20837;&#20013;&#46;&#46;&#46;&#46;&#46;&#46;</div>
<div class="lazy_cover"></div>
<div class="resource_lazy hide"></div>
<div class="pic_edit">

	<div id="clipArea"></div>
    <div id="uploadbutton">
        <button id="selectimg">&#36873;&#25321;&#22270;&#29255;</button>
        <button id="clipBtn">&#19978;&#20256;&#22270;&#29255;</button>
    </div>
	<input type="file" id="file" style="  ">
   
    
</div> 
<div id="plan"></div>
<img src="" fileName="" id="hit" style="display:none;z-index: 9">

<div id="cover"></div>
<link rel="stylesheet" href="./template/strong_a1/touch/avatar/style.css?v=2">
<style>
.circle{display:none;}
</style>
<script src="./template/strong_a1/touch/avatar/sonic.js"></script>
<script src="./template/strong_a1/touch/avatar/comm.js"></script>
<script src="./template/strong_a1/touch/avatar/hammer.js"></script>
<script src="./template/strong_a1/touch/avatar/iscroll-zoom.js"></script>
<script src="./template/strong_a1/touch/avatar/jquery.photoClip.js?v=1"></script>
<script>
var hammer = '';
var currentIndex = 0;



$("#clipArea").photoClip({
	width:300,
	height:300,
	file: "#file",
	view: "#hit",
	ok: "#clipBtn",
	loadStart: function () {
				
		$('.lazy_tip span').text('');
		$('.lazy_cover,.lazy_tip').show();
		
	},
	loadComplete: function (s) {

		$('.photo-clip-area').css({"background":""});
		$('.lazy_cover,.lazy_tip').hide();
	},
	clipFinish: function (dataURL) {
	
		var bg2=new Image();  
		bg2.onload = function () {
			saveImageInfo();
		}
		
		$('#hit').attr('src', dataURL);
		$('#plan').append("<img id='returnimg' src='"+dataURL+"'>"); 
		$('#plan').append("<canvas id='myCanvas2' width='180' height='180'></canvas>"); 
		$('#plan').append("<canvas id='myCanvas3' width='80' height='80'></canvas>"); 
		bg2.src=dataURL;
	}
});

$('.photo-clip-area').css({"background":"url('"+$('#defaultavatar img').attr('src')+"')","background-size":"300px 300px"});
//ͼƬ�ϴ�
function saveImageInfo() {
	
	var filename = $('#hit').attr('fileName');	
	var img_data = $('#hit').attr('src');
	if(img_data==""){alert('null');}

	var demoimg=document.getElementById("returnimg");
	var d=document.getElementById("myCanvas2");	
	var dtx=d.getContext("2d");
	dtx.drawImage(demoimg,0,0,180,180);
	dtx.restore();
	var img_data2 = d.toDataURL("image/jpeg");
	
	var d2=document.getElementById("myCanvas3");
	var dtx2=d2.getContext("2d");
	dtx2.drawImage(demoimg,0,0,80,80);
	dtx2.restore();
	var img_data3 = d2.toDataURL("image/jpeg");
	


	
			$.ajax({
				type:'POST',
				url:'./plugin.php?id=strong_a1:uploadavatar',
				data:{image:img_data,image2:img_data2,image3:img_data3,formhash:'{FORMHASH}',handlekey:'uploadavatar',inajax:'1',loc:'1'}
			})
			.success(function(s) {			
				popup.open(s.lastChild.firstChild.nodeValue);
			})
			.error(function() {

			});
	
	
	
}
	function succeedhandle_uploadavatar(locationhref, message, param){
		var timeout = param['timeout'];
	
		setTimeout(function() {
					window.location.href = locationhref;
				}, timeout);
		}



/*��ȡ�ļ���չ��*/
function getFileExt(str) {
	var d = /\.[^\.]+$/.exec(str);
	return d;
}

//ͼƬ�ϴ�����
$(function () {
	$('#selectimg').on('click', function () {
		//ͼƬ�ϴ���ť
		
		$('#file').click();
	});
})


  
</script>


</div>






</div>
<!--{template common/footer}-->